<!--
 * @Author: Wangtao
 * @Date: 2022-07-26 14:13:50
 * @LastEditors: Wangtao
 * @LastEditTime: 2022-08-04 18:03:16
-->
<template>
  <!-- 企业信息 -->
  <div class="company-info" v-skeleton.animated="loading">
    <div class="box-card">
      <div class="company-title" v-skeleton-item>北京市容联七陌科技有限公司</div>
      <el-divider class="line" />
      <ul class="company-info-list">
        <li v-for="(item, index) of basicList" :key="index">
          <div class="info-label" v-skeleton-item>{{ item.label }}</div>
          <div class="info-value" v-skeleton-item>{{ item.value }}</div>
        </li>
      </ul>
      <el-divider class="line1" />
      <ul class="info-data">
        <li v-for="(item, index) of companyInfoList" :key="index">
          <div class="info-label" v-if="item.isShow" v-skeleton-item>
            <div class="label-title">呼叫中心</div>
            <div class="label-version">
              <p>高级版</p>
            </div>
          </div>
          <div class="info-label" v-skeleton-item v-else>{{ item.label }}</div>
          <div class="info-value" v-skeleton-item>{{ item.value }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'

export default defineComponent({
  name: 'companyInfo',
  components: {},
  setup() {
    const state = reactive({
      loading: false,
      basicList: [
        {
          label: '企业账号:',
          value: '7moor'
        },
        {
          label: 'App验证码:',
          value: 'N0000000008888'
        }
      ],
      companyInfoList: [
        {
          label: '套餐:',
          value: '呼叫中心高级版'
        },
        {
          label: '呼叫中心',
          isShow: true,
          value: '10个'
        },
        {
          label: '有效期:',
          value: '2022/06/20-2023/06/20'
        },
        {
          label: '剩余预付金额:',
          value: '¥ 0.00'
        },
        {
          label: '1万条短信资源包:',
          value: '5800/1000 条'
        },
        {
          label: '呼叫语音资源包:',
          value: '300.50/800 分钟'
        },
        {
          label: '企业空间:',
          value: '1.25G/5G'
        }
      ]
    })
    const skeletonTest = () => {
      state.loading = true
    }
    return {
      ...toRefs(state),
      skeletonTest
    }
  }
})
</script>

<style lang="stylus" scoped>
.company-info
    height 100%
    width 100%
    .box-card
      height 100%
      width 100%
      .company-title
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0px 0px 8px;
        gap: 4px;
        width: 300px;
        height: 44px;
        flex: none;
        order: 0;
        align-self: stretch;
        flex-grow: 0;
        font-style: normal;
        font-weight: 500;
        font-size: 20px;
        line-height: 28px;
        letter-spacing: 0.001em;
        color: rgba(0, 0, 0, 0.88);
        box-sizing border-box
      .line
        width: 300px;
        height: 1px;
        background: var(--mc-gray3-color);
        flex: none;
        order: 1;
        align-self: stretch;
        flex-grow: 0;
        margin 0
        box-sizing border-box
      .company-info-list
        list-style none
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        width: 300px;
        height: 72px;
        flex: none;
        order: 2;
        align-self: stretch;
        flex-grow: 0;
        li
          display: flex;
          flex-direction: row;
          align-items: center;
          padding: 0px;
          width: 100%;
          height: 36px;
          flex: none;
          order: 2;
          align-self: stretch;
          flex-grow: 0;
          font-style: normal;
          font-weight: 400;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.88);
          .info-label
            height: 20px;
            line-height: 20px;
            display: flex;
            align-items: center;
            letter-spacing: 0.001em;
            flex: 1;
            order: 0;
            flex-grow: 1;
          .info-value
            width: 42px;
            height: 20px;
            line-height: 20px;
            align-items: center;
            text-align: right;
            letter-spacing: 0.001em;
            flex: 1;
            order: 1;
            flex-grow: 1;
      .line1
        width: 300px;
        height: 1px;
        background: var(--mc-gray3-color);
        flex: none;
        order: 3;
        align-self: stretch;
        flex-grow: 0;
        margin 0
        box-sizing border-box
      .info-data
        list-style none
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        width: 300px;
        height: 252px;
        flex: none;
        order: 4;
        align-self: stretch;
        flex-grow: 0;
        li
          display: flex;
          flex-direction: row;
          justify-content : space-between;
          align-items: center;
          padding: 0px;
          width: 300px;
          height: 36px;
          flex: none;
          align-self: stretch;
          flex-grow: 0;
          font-style: normal;
          font-weight: 400;
          font-size: 14px;
          letter-spacing: 0.001em;
          color: rgba(0, 0, 0, 0.88);
          .info-label
            height: 20px;
            line-height: 20px;
            display: flex;
            align-items: center;
            flex: none;
            order: 0;
            flex-grow: 1;
          .info-value
            height: 20px;
            line-height: 20px;
            display: flex;
            align-items: center;
            flex: none;
            order: 1;
            flex-grow: 0;
          &:first-child
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 0px;
            width: 300px;
            height: 36px;
            flex: none;
            order: 0;
            align-self: stretch;
            flex-grow: 0;
            .info-label
              width: 43px;
              height: 20px;
              line-height: 20px;
              display: flex;
              align-items: center;
              flex: none;
              order: 0;
              flex-grow: 0;
            .info-value
              height: 20px;
              line-height: 20px;
              display: flex;
              align-items: center;
              flex: none;
              order: 1;
              flex-grow: 0;
          &:nth-child(2)
            .info-label
              display: flex;
              flex-direction: row;
              align-items: center;
              padding: 0px;
              width: 271px;
              height: 20px;
              flex: none;
              order: 0;
              flex-grow: 1;
              .label-title
                width: 57px;
                height: 20px;
                line-height: 20px;
                display: flex;
                align-items: center;
                flex: none;
                order: 0;
                flex-grow: 0;
              .label-version
                display: flex;
                flex-direction: row;
                align-items: center;
                padding: 0px 4px;
                gap: 8px;
                width: 45px;
                height: 18px;
                background: #EBF7FF;
                border-radius: 100px;
                flex: none;
                order: 1;
                flex-grow: 0;
                box-sizing border-box
                p
                  width: 37px;
                  height: 18px;
                  font-size: 12px;
                  line-height: 18px;
                  letter-spacing: 0.001em;
                  color: #0452C8;
                  flex: none;
                  order: 0;
                  flex-grow: 1;
                  text-align center
                  margin 0
</style>
